<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>vip管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body>
    <table class="layui-hide" id="vipTable" lay-filter="vipTable"></table>

    <script type="text/html" id="vipAdd">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">创建vip</button>
        </div>
    </script>

    <script type="text/html" id="vipEdit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑vip</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除vip</a>
    </script>

    <script src="../../layui/layui.js"></script>
    <script>
        layui.use(['table','layer','form','jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                $ = layui.jquery;

            table.render({
                elem: '#vipTable',
                url:'${pageContext.request.contextPath}/selectAllVip.do',
                title: 'vip管理',
                toolbar:"#vipAdd",
                cols: [[
                    {field:'vtName', title:'会员名称'},
                    {field:'vipDay', title:'会员天数'},
                    {field:'vipMoney', title:'会员价格'},
                    {fixed: 'right', title:'操作', toolbar: '#vipEdit'}
                ]]
            });

            //监听创建事件
            table.on('toolbar(vipTable)', function(obj){
                if(obj.event === 'add'){
                    layer.open({
                        type:1,//type=1 弹出页面层
                        title:"创建vip",
                        content: $("#vipPanel").html(),//弹出层内容
                        area:['450px','280px'],
                        btn: ['保存', '重置', '取消'],
                        yes: function(index, layero){//点击保存按钮执行的方法
                            var vip = form.val("vipPanel");//获取form修改后的值
                            var vipStr = JSON.stringify(vip);
                            $.post(("${pageContext.request.contextPath}/createVip.do"),{vipStr:vipStr},function(result){
                                if(result.status){
                                    table.reload("vipTable",{});
                                    layer.close(index);//关闭弹框
                                }else{
                                    layer.msg(result.message);
                                    return false;
                                }
                            },"json");
                        },btn2: function(index, layero){//点击重置按钮执行的方法
                            form.val("vipPanel",{
                                "vtName":"",
                                "vipDay":0,
                                "vipMoney":0,
                            });
                            return false;
                        },btn3: function(index, layero){//点击取消按钮执行的方法
                        },success: function(){//只要打开弹出层就执行此方法
                            form.val("vipPanel",{
                                "vtName":"",
                                "vipDay":0,
                                "vipMoney":0,
                            });
                            form.render();//渲染表单,如果不写,弹出层内容是空白
                        }
                    });
                }
            });

            //监听编辑、删除事件
            //tool(subject)对应table表格中的lay-filter="subject"
            table.on('tool(vipTable)', function(obj){//obj代表一行数据和编辑按钮 删除按钮
                var data = obj.data;//obj.data代表一行数据
                var vtId = data.vtId;
                if(obj.event === 'del'){
                    layer.confirm('确定要删除么？', function(index){//弹出询问框
                        $.post(("${pageContext.request.contextPath}/deleteVipByVtid.do"),{vtId:vtId},function(result){
                            if(result.status){
                                table.reload("vipTable",{});
                                layer.close(index);//关闭弹框
                            }else{
                                layer.msg(result.message);
                                return false;
                            }
                        },"json");
                    });
                }else if(obj.event === 'edit'){
                    layer.open({
                        type:1,//type=1 弹出页面层
                        title:"修改学科信息",
                        content: $("#vipPanel").html(),//弹出层内容
                        area:['450px','280px'],
                        btn: ['保存', '重置', '取消'],
                        yes: function(index, layero){//点击保存按钮执行的方法
                            var vip = form.val("vipPanel");//获取form修改后的值
                            vip.vtId = vtId;//将vipId注入获取的对象vip中
                            var vipStr = JSON.stringify(vip);
                            $.post("${pageContext.request.contextPath}/updateVipByVtId.do",{vipStr:vipStr},function(result){
                                if(result.status){
                                    table.reload("vipTable",{});
                                    layer.close(index);
                                }else{
                                    layer.msg(result.message);
                                    return false;
                                }
                            },"json");
                        },btn2: function(index, layero){//点击重置按钮执行的方法
                            form.val("vipPanel",{
                                "vtName":data.vtName,
                                "vipDay":data.vipDay,
                                "vipMoney":data.vipMoney
                            });
                            return false; //开启该代码可禁止点击该按钮关闭
                        },btn3: function(index, layero){//点击取消按钮执行的方法
                        },success: function(){//只要打开弹出层就执行此方法
                            form.val("vipPanel",{
                                "vtName":data.vtName,
                                "vipDay":data.vipDay,
                                "vipMoney":data.vipMoney,
                            });
                            form.render();//渲染表单,如果不写,弹出层内容是空白
                        }
                    });
                }
            });
        });
    </script>

    <!--  vip面板  -->
    <script type="text/html" id="vipPanel">
        <form class="layui-form" lay-filter="vipPanel">
            <div class="layui-form-item">
                <label class="layui-form-label">vip名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="vtName" placeholder="请输入vip名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">vip天数</label>
                <div class="layui-input-inline">
                    <input type="number" name="vipDay" placeholder="请输入vip天数" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">vip价格</label>
                <div class="layui-input-inline">
                    <input type="number" name="vipMoney" placeholder="请输入vip价格" class="layui-input">
                </div>
            </div>
        </form>
    </script>
</body>
</html>
